import React, { Component } from 'react';
import { getClassify } from '../api'
import BScroll from '@better-scroll/core'
class Classify extends Component {
  state = {
    list: [],
    // 高亮下标
    activeIndex: 0,
  }
  // 获取数据 同时 设置数据
  async getClassifyAndSetList() {
    // 等待数据的获取
    const resp = await getClassify()
    // 设置数据
    this.setState({ list: resp.data.data }, () => {
      // 该回调函数执行的时候， 说明数据更新完毕 而且渲染完毕
      // 初始化
      this.initBScorll()
      // 获取节点
      this.listItem = document.querySelectorAll('.list-item')
    })
  }
  handleClickTitle(i) {
    this.setState({
      activeIndex: i
    })
    // 滚动到对应的节点
    this.bs.scrollToElement(this.listItem[i], 2000)
  }
  // 初始化bs
  initBScorll() {
    this.bs = new BScroll('.content')
  }
  render() {
    const { list, activeIndex } = this.state
    return (
      <div className="classify">
        <div className="title">
          {
            list.length > 0 && list.map((v, i) => {
              return <b key={i}
                className={i === activeIndex ? 'active' : ''}
                onClick={() => this.handleClickTitle(i)}
              >{v.title}</b>
            })
          }
        </div>
        <div className="content">
          <div>
            {
              list.length > 0 && list.map(v => {
                return (
                  <div key={v.id} className="list-item">
                    <h3>{v.title}</h3>
                    {
                      v.children.map(v => {
                        return (
                          <dl key={v.id}>
                            <dt><img src={v.url} alt="" /></dt>
                            <dd>
                              <h4>{v.title}</h4>
                              <p>{v.desc}</p>
                            </dd>
                          </dl>
                        )
                      })
                    }
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>
    );
  }
  componentDidMount() {
    // 获取数据
    this.getClassifyAndSetList()
  }
}

export default Classify;
